{extend name="iframe" /}
{block name="css"}
<link href="__STATIC__/plugins/mediaelement-4.2.9/mediaelementplayer.min.css" rel="stylesheet">
    <style type="text/css">
        .addForm{
            margin-top: 20px;
        }
        .submit_btn{
            display: none;
        }
        @media (min-width: 768px){
            .bootstrap-switch{
                margin-top: 7px;
            }
        }
    </style>
{/block}

{block name="content"}
    <div class="container-fluid content-wrapper-box">
        <div class="content-wrapper">
            <form class="form-horizontal addForm" action="" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        <em class="must_fill"></em>客户姓名&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" id="client_name" name="client_name" class="form-control" placeholder="客户姓名" data-msg="客户姓名不能为空">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>手机号&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" id="phone" name="phone" class="form-control" value="{$data.phone}" placeholder="客户手机号" required data-msg="手机号不能为空">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        微信&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" id="wechat" name="wechat" placeholder="客户微信号" class="form-control">
                    </div>
                </div>


                <!--【订单】-----------------------------------------------start-->
                <div class="form-group">
                    <label class="control-label col-xs-2 text-green">
                        立即下单&nbsp;
                    </label>
                    <div class="col-xs-8" style="padding-top: 7px;">
                        <label style="text-align: right;margin-left: 8px;">
                            <input type="checkbox" class="" value="1" id="new_order" name="new_order">
                        </label>
                    </div>
                </div>
                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        <em class="must_fill"></em>订单客户姓名&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" id="order_nickname" name="order[order_nickname]" class="form-control" placeholder="订单客户姓名"  data-msg="订单客户姓名不能为空" disabled="disabled">
                    </div>
                </div>
                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>订单客户手机号&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" id="order_phone" name="order[order_phone]" class="form-control" placeholder="订单联系人手机" required data-msg="订单联系人手机不能为空" disabled="disabled">
                    </div>
                </div>
                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        微信&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" id="order_wechat" name="order[order_wechat]" class="form-control" placeholder="订单联系人微信号" disabled="disabled">
                    </div>
                </div>
                <!--【选择服务项目】-->
                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>服务项目&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" value="" id="srv_item_id" name="order[srv_item_id]" class="form-control" placeholder="选择服务项目" required data-msg="服务项目不能为空" disabled="disabled">
                    </div>
                </div>
                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>服务面积&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" id="service_area" name="order[service_area]" class="form-control" placeholder="服务的建筑物或者房屋面积" required data-msg="服务面积必须填写" disabled="disabled">
                    </div>
                </div>
                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        服务时间&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" id="service_time" name="order[service_time]" class="form-control dateTimePicker" placeholder="服务时间" disabled="disabled">
                    </div>
                </div>
                <!--【省市区】-->
                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        服务地区&nbsp;
                    </label>
                    <div class="col-xs-8 form-inline" id="cxselect_addr">
                        <select class="province form-control" name="order[province]" data-first-title="选择省" disabled="disabled"></select>
                        <select class="city form-control" name="order[city]" data-first-title="选择市" disabled="disabled"></select>
                        <select class="area form-control" name="order[area]" data-first-title="选择区" disabled="disabled"></select>
                    </div>
                </div>

                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>详细地址&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <div class="input-group">
                            <input type="text" class="form-control" id="addr" name="order[addr]" placeholder="输入所在城市详细地址" required data-msg="详细地址不能为空">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        订单备注&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <textarea  id="brief"  name="order[brief]" class="form-control" placeholder="订单备注说明" disabled="disabled"></textarea>
                    </div>
                </div>

                <input class="btn btn-primary submit_btn" onclick="submitFrom()" type="submit">
                <input class="btn btn-default reset_btn" type="hidden" onclick="resetForm()">
            </form>

            <div class="clearfix"></div>
            <hr class="m-b-xs">
            <div class="clearfix"></div>
            <div class="clients-list">
                <ul class="nav nav-tabs">
                    <li class="tab_addon active">
                        <a data-toggle="tab" href="#tab-1" aria-expanded="true"><i class="fa fa-tags"></i> 历史订单</a>
                    </li>
                    <li class="tab_addon">
                        <a data-toggle="tab" href="#tab-2" aria-expanded="true"><i class="fa fa-file-audio-o"></i> 通话记录</a>
                    </li>
                </ul>

                <div class="tab-content" id="tab_history">
                    <div id="tab-1" class="tab-pane active">
                        <div class="slimScrollDiv" style="position: relative; width: auto; height: 100%;">
                            <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead>
                                    <tr>
                                        <th>订单号</th>
                                        <th>下单时间</th>
                                        <th>客户姓名</th>
                                        <th>客户手机</th>
                                        <th>详细地址</th>
                                        <th>接单客服</th>
                                        <th>服务项目</th>
                                        <th>服务面积</th>
                                        <th>服务商地区</th>
                                        <th>商家电话</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbody_orders">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane">
                        <div class="slimScrollDiv" style="position: relative; width: auto; height: 100%;">
                            <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead>
                                    <tr>
                                        <th>呼叫时间</th>
                                        <th>主叫</th>
                                        <th>被叫</th>
                                        <th>通话时长</th>
                                        <th>呼叫类型</th>
                                        <th>录音</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbody_cdr">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
{/block}

{block name="script"}
<script type="text/javascript" charset="utf-8" src="__STATIC__/plugins/cxselect/jquery.cxselect.min.js"> </script>
<script src="__STATIC__/plugins/suggest/bootstrap-suggest.min.js"></script>
<script src="__STATIC__/plugins/mediaelement-4.2.9/mediaelement-and-player.min.js"></script>
<script src="__STATIC__/plugins/mediaelement-4.2.9/lang/zh-cn.js"></script>
    <script type="text/javascript">
        $(function () {
            var $modalWin = $("#modalWin");

            //初始化日期控件
            dateTimePickerInit();

            var srvItems = {$srvItems | da_jencode |raw};
            $('#srv_item_id').selectPage({
                showField : 'service_name',
                keyField : 'id',
                data : srvItems
            });

            $('#cxselect_addr').cxSelect({
                url: '/public/admin/plugins/cxselect/cityData.min.json',
                selects: ['province', 'city', 'area'],
                emptyStyle: 'none'
            });


            $.validator.setDefaults({
                errorPlacement: function (error, element) {
                    if (element.is(":radio") || element.is(":checkbox")) {
                        error.appendTo(element.parent().parent());
                    } else {
                        error.appendTo(element.parent());
                    }
                }
            });

            //根据弹屏的手机号，查询历史订单
            ajaxGetHistoryOrder();

            $('#new_order').on('change', function(){
                $('div.new_order').toggleClass('hidden');
                var checked =$(this).is(':checked');
                if(checked){
                    var client_phone = $('#phone').val();
                    $('div.new_order').find(':input').removeAttr('disabled');

                    $('#order_nickname').val( $('#client_name').val() );
                    $('#order_phone').val( client_phone );
                    $('#order_wechat').val( $('#wechat').val() );

                    //重置省市区
                    $('.province').val('');
                    $('.city').val('');
                    $('.area').val('');

                    //ajax根据手机号修改地址省市区
                    if(client_phone && client_phone.length > 9){
                            var phoneInfo = top.parsePhone(client_phone);
                            if(phoneInfo.search && phoneInfo.searchPre ){
                                $.ajax({
                                    type: 'GET',
                                    url: top.ccIP + '/index.php?m=Fast&c=Invoke&a=mobilearea',
                                    data: { search: phoneInfo.search, searchPre: phoneInfo.searchPre },
                                    dataType: 'json',
                                    success: function (json) {
                                        if(json.result=='success'){
                                                if(json.data.province === json.data.city){
                                                    $('.province').val( json.data.province ).change();   //省

                                                }else{
                                                    $('.province').val( json.data.province ).change();   //省
                                                    $('.city').val( json.data.city ).change();   //市
                                                }
                                        }
                                    }
                                });

                            }
                    }

                }else{
                    $('div.new_order').find(':input').attr('disabled', true);
                }
            });


            $("#addr").bsSuggest({
                url: "{:url('Api/searchAddr')}",
                getDataMethod: "url",
                effectiveFields: ["province", "city", "district", "title", "address"],
                effectiveFieldsAlias:{province: "省",city: "市",district: "区",title: "提示文字",address: "地址"},
                searchFields: ["province", "city", "district", "title", "address"],
                showBtn: false,
                showHeader: false,
                idField: "id",
                keyField: "title",
                allowNoKeyword: false,
                fnAdjustAjaxParam: function(keyword, opts) {
                    var province = $('.province').val();
                    var city = $('.city').val();
                    return {
                        timeout: 6000,
                        data: {
                            region: city? city: province,
                            keyword: $('#addr').val()
                        }
                    };
                }
            }).on('onSetSelectValue', function (e, selectedData, selectedRowData) {
                $('#addr').val(selectedData.key + '-' + selectedRowData.address);
                if(selectedRowData.province === selectedRowData.city){
                    $('.province').val( selectedRowData.province ).change();
                    $('.city').val( selectedRowData.district );

                }else{
                    $('.province').val( selectedRowData.province ).change();
                    $('.city').val( selectedRowData.city ).change();
                    $('.area').val( selectedRowData.district );
                }
            });


            $('li.tab_addon > a').on('show.bs.tab', function (e) {
                var href = $(e.target).attr('href');
                switch( href.split('-')[1] ){
                    case '1':
                        ajaxGetHistoryOrder();
                        break;
                    case '2':
                        ajaxGetHistoryCdr();
                        break;
                }

            });

            //录音窗口事件绑定
            $('#tbody_cdr').on('click', 'a.opt-record', function () {
                var uniqueid = $(this).data('uniqueid');
                var accountcode = $(this).data('accountcode');
                var inner_exten = $(this).data('inner_exten');

                $('#modalWin').modal({
                    backdrop: 'static',
                    remote: "{:url('Cdr/record')}" +'?uniqueid=' +uniqueid +'&accountcode=' +accountcode +'&inner_exten=' +inner_exten
                });
            });
            $modalWin.on("hidden.bs.modal", function() {
                $(this).removeData("bs.modal");
            });
            $modalWin.on("click", '#btn-cancel', function() {
                var myVideo = document.getElementById("cdr_record");
                myVideo && myVideo.pause();
                $modalWin.modal('hide');
            });
            $modalWin.on('click', 'button.close', function () {
                var myVideo = document.getElementById("cdr_record");
                myVideo && myVideo.pause();
            });


            //弹出编辑订单窗口
            $('#tbody_orders').on('click', 'a.order_view', function () {
                top.popMenu('14', top.editOrder);
            });

            //点击拨号
            $('#tab_history').on("click", 'a.clkcall' ,function() {
                var callee_phone = $(this).next('span').text();
                if(callee_phone==''){
                    bootbox.error('呼叫失败：号码不能为空！');
                    return;
                }
                top.clickcall(callee_phone);
                return false;
            });

        });

        //初始化日期控件
        function dateTimePickerInit() {
            $('.dateTimePicker').datetimepicker({
                format: 'YYYY-MM-DD HH:mm:ss',
                locale: moment.locale('zh-cn')
            });
        }

        //获取订单历史
        function ajaxGetHistoryOrder(){
            $.ajax({
                type: 'POST',
                url: '{:url("Order/clientOrder")}',
                data: {order_phone: '{$data.phone}'},
                dataType: 'html',
                success: function (html) {
                    $('#tbody_orders').html(html);
                }
            });
        }

        //获取订单Cdr
        function ajaxGetHistoryCdr(){
            $.ajax({
                type: 'POST',
                url: '{:url("Cdr/clientCdr")}',
                data: {order_phone: '{$data.phone}'},
                dataType: 'html',
                success: function (html) {
                    $('#tbody_cdr').html(html);
                }
            });
        }


        //提交表单
        function submitFrom() {
            var  frameIndex= parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            //表单验证
            $(".addForm").validate({
                keydown:true,
                submitHandler: function(form) {
                    $(form).ajaxSubmit({
                        dataType:'json',
                        success:function (response) {
                            if(response.code === 0){
                                parent.toastr.success(response.msg);
                                parent.layer.close(frameIndex);
                            }else{
                                parent.toastr.error(response.msg);
                            }
                            //刷新数据表格
                            parent.searchForm();
                        }
                    });
                }
            })
        }

        function resetForm() {
            $('.addForm')[0].reset();
            switchInit();
        }
    </script>
{/block}
